import {useEffect, useRef, useState} from 'react'
import './App.scss'
import avatar from './images/bozai.png'
import classNames from "classnames";
import _ from "lodash"
import {v4 as uuidV4} from "uuid";
import dayjs from 'dayjs'
import axios from "axios";

// 当前登录用户信息
const user = {
    // 用户id
    uid: '30009257',
    // 用户头像
    avatar,
    // 用户昵称
    uname: 'React ',
}
// 导航 Tab 数组
const tabList = [
    {type: 'hot', text: '最热'},
    {type: 'time', text: '最新'},
]

const list = [
    {
        "rpid": 3,
        "user": {
            "uid": "13258165",
            "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
            "uname": "周杰伦"
        },
        "content": "哎哟，不错哦",
        "ctime": "10-18 08: 15",
        "like": 126
    },
    {
        "rpid": 2,
        "user": {
            "uid": "36080105",
            "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
            "uname": "许嵩"
        },
        "content": "我寻你千百度 日出到迟暮",
        "ctime": "11-13 11: 29",
        "like": 88
    },
    {
        "rpid": 1,
        "user": {
            "uid": "30009257",
            avatar,
            "uname": "React"
        },
        "content": "啦啦啦",
        "ctime": "10-19 09: 00",
        "like": 66
    }
]

function Item({item, onDel}) {
    return (
        <div className="reply-item">
            {/* 头像 */}
            <div className="root-reply-avatar">
                <div className="bili-avatar">
                    <img
                        className="bili-avatar-img"
                        alt=""
                        src={item.user.avatar}
                    />
                </div>
            </div>

            <div className="content-wrap">
                {/* 用户名 */}
                <div className="user-info">
                    <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 评论内容 */}
                <div className="root-reply">
                    <span className="reply-content">{item.content}</span>
                    <div className="reply-info">
                        {/* 评论时间 */}
                        <span className="reply-time">{item.ctime}</span>
                        {/* 评论数量 */}
                        <span className="reply-time">点赞数:{item.like}</span>
                        {/* 条件：user.id === item.user.id */}
                        {user.uid === item.user.uid &&
                            <span className="delete-btn" onClick={() => onDel(item.rpid)}>
                删除
              </span>}
                    </div>
                </div>
            </div>
        </div>
    )
}


function useGetList() {
    const [commentList, setCommentList] = useState([]);
    useEffect(() => {
        async function getList() {
            return await axios.get("http://localhost:3004/list");
        }

        getList().then(r => setCommentList(r.data));
    }, [])
    return {
        commentList,
        setCommentList
    }
}


const App = () => {

    // const [commentList, setCommentList] = useState(_.orderBy(list, 'like', "desc"));静态数据

    const [tabs] = useState(tabList);
    let [type, setType] = useState("hot")

    const {commentList, setCommentList} = useGetList()

    const handleTabChange = (type) => {
        setType(type);
        // 基于列表的排序
        if (type === 'hot') {
            // 根据点赞数
            setCommentList(_.orderBy(commentList, 'like', "desc"))
        } else {
            // 根据时间
            setCommentList(_.orderBy(commentList, 'ctime', "desc"))
        }
    };

    // 删除评论
    const onDel = (id) => {
        return () => {
            setCommentList(commentList.filter(item => item.rpid !== id))
        }
    };

    // 发表评论
    const [context, setContext] = useState("")
    const comment = useRef(null);
    const handlePublish = () => {
        setCommentList([
            ...commentList,
            {
                "rpid": uuidV4(),
                "user": {
                    "uid": "13258165",
                    "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
                    "uname": "周杰伦"
                },
                "content": context,
                "ctime": dayjs(Date.now()).format("MM-DD hh:mm"),
                "like": 0
            },
        ])
        setContext('')
        comment.current.focus();
    }

    return (
        <div className="app">
            {/* 导航 Tab */}
            <div className="reply-navigation">
                <ul className="nav-bar">
                    <li className="nav-title">
                        <span className="nav-title-text">评论</span>
                        {/* 评论数量 */}
                        <span className="total-reply">{commentList.length}</span>
                    </li>
                    <li className="nav-sort">
                        {/* 高亮类名： active */}
                        {tabs.map(item =>
                            <span
                                key={item.type}
                                onClick={() => handleTabChange(item.type)}
                                className={classNames('nav-item', {active: type === item.type})}>
                {item.text}
              </span>)}
                    </li>
                </ul>
            </div>

            <div className="reply-wrap">
                {/* 发表评论 */}
                <div className="box-normal">
                    {/* 当前用户头像 */}
                    <div className="reply-box-avatar">
                        <div className="bili-avatar">
                            <img className="bili-avatar-img" src={avatar} alt="用户头像"/>
                        </div>
                    </div>
                    <div className="reply-box-wrap">
                        {/* 评论框 */}
                        <textarea
                            className="reply-box-textarea"
                            placeholder="发一条友善的评论"
                            value={context}
                            ref={comment}
                            onChange={(event) => {
                                setContext(event.target.value)
                            }}
                            onKeyUp={(event) => {
                                if (event.keyCode === 13) {
                                    handlePublish();
                                }
                            }}
                        />
                        {/* 发布按钮 */}
                        <div className="reply-box-send">
                            <div className="send-text" onClick={handlePublish}>发布</div>
                        </div>
                    </div>
                </div>
                {/* 评论列表 */}
                <div className="reply-list">
                    {/* 评论项 */}
                    {commentList.map(item => <Item key={item.rpid} item={item} onDel={onDel(item.rpid)}/>)}
                </div>
            </div>
        </div>
    )
}

export default App
